<template>
  <div class="card-container flex-col">
    <div class="l-1">最高借款额度(元)</div>
    <div class="l-2 flex-center">
      <span class="money">50000.00</span>
      <button class="btn" @click="btnClick">去信用评估</button>
    </div>
    <div class="l-3">授权越多，信用越高，借款额度越高</div>
    <div class="l-4"></div>
    <div class="l-5">
      <div class="label">
        <i class="check"></i>
        <span class="ctn">闪电放款</span>
      </div>
      <div class="label">
        <i class="check"></i>
        <span class="ctn">借款额度高</span>
      </div>
      <div class="label">
        <i class="check"></i>
        <span class="ctn">审核通过率高</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'loanCard',
    data() {
      return {}
    },
    methods: {
      btnClick(){
        this.$toast('敬请期待')
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .card-container
    background: linear-gradient(to right, $gradientDeep, $gradientTint)
    border-radius .16rem
    padding .34rem .4rem
    box-sizing border-box
    height 3.4rem
    color white
    font-size .3rem
    .l-2
      justify-content space-between
      font-size .64rem
      font-weight bold
      margin-top .2rem
      .btn
        background-color white
        border-radius 5rem
        padding .14rem .44rem
        box-sizing border-box
        font-size .3rem
        font-weight bold
        color $textButton
    .l-3
      font-size .24rem
      margin-top .3rem
    .l-4
      height .02rem
      margin-top .4rem
      background-color rgba(255,255,255,.33)
    .l-5
      display flex
      font-size .26rem
      margin-top .32rem
      justify-content space-around
      .label
        display flex
        align-items center
        .check
          width .28rem
          height .28rem
          background url("/static/img/check.png")no-repeat;
          background-size 100% 100%
        .ctn
          margin-left .1rem

</style>
